<template>
    <div class="wp">
        <div class="menu">
            <span>BF - Ver{{ config.version }}</span>
            <span>博富云节点联通</span>
            <span>{{ classHeyueIndex }}</span>
        </div>
        <div class="btn">
            <span class="change_menu" title="最小化" @click="changeSize(1)"> <i class="iconfonMy icon-zuixiaohua"></i></span>
            <span class="change_menu" v-if="isMax" @click="changeSize(2)"> <i class="iconfonMy icon-3zuidahua-3"></i></span>
            <span class="change_menu" v-if="!isMax" @click="changeSize(2)"> <i
                    class="iconfonMy icon-zhengfangxing"></i></span>
            <span class="close" title="关闭" @click="changeSize(3)"> <i class="iconfonMy icon-guanbi1"></i></span>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { remote } from 'electron'
import { mainStore } from '@/store/index.js';
const store = mainStore();
const currentWindow = remote.getCurrentWindow();
const config = ref(require('../../../package.json'))
const isMax = ref(false)
const classHeyueIndex = computed(() => store.classHeyueIndex);

onMounted(() => {
    currentWindow.on('maximize', () => {
        isMax.value = true;
    });

    currentWindow.on('unmaximize', () => {
        isMax.value = false;
    });
});
function changeSize(v) {
    if (v == 1) {
        currentWindow.minimize()
    }
    if (v == 2) {
        if (currentWindow.isMaximized()) {
            currentWindow.unmaximize(); // 如果窗口已经最大化，则取消最大化
        } else {
            currentWindow.maximize(); // 否则窗口最大化
        }
    }
    if (v == 3) {
        currentWindow.close()
    }
}
</script>

<style scoped lang="scss">
.wp {
    -webkit-app-region: drag;
    background-color: #303438;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 25px;

    .menu {
        flex: 1;

        span {
            padding: 0 15px
        }
    }

    .btn {
        display: flex;
        -webkit-app-region: no-drag;

        span {
            display: flex;
            padding: 0 14px;
            flex: 1;
            line-height: 25px;
            align-items: center;
            justify-content: center;

            i {
                font-size: 12px;
            }
        }

        .change_menu:hover {
            background-color: #43484e;
        }

        .close:hover {
            background-color: #dc0000;
        }
    }
}
</style>
